Adwaita: column headers visual simplification
authorLapo Calamandrei <calamandrei@gmail.com>
Mon, 16 Jun 2014 14:45:24 +0000 (16:45 +0200)
committerLapo Calamandrei <calamandrei@gmail.com>
Mon, 16 Jun 2014 14:46:05 +0000 (16:46 +0200)
gtk/resources/theme/Adwaita/_common.scss
gtk/resources/theme/Adwaita/gtk-contained-dark.css
gtk/resources/theme/Adwaita/gtk-contained.css

index c8bd130292648ad73c1acb03e167eeab0f4b95dc..d382b095637bc8ae191587cde6dc80019c54ce25 100644 (file)
@@ -651,25 +651,44 @@ GtkComboBox {
 /**************
  * Tree Views *
  **************/
-
-column-header { // FIXME: something better
-  .button,
-  .button:hover,
-  .button:active,
-  .button:backdrop {
-    border-width: 0 1px 1px 0;
-    border-color: transparent;
+column-header {
+  .button {
+    @extend %column_header_button;
+    $_column_header_color: mix($fg_color,$base_color,50%);
+    color: $_column_header_color;
+    font-weight: bold;
+    text-shadow: none;
     box-shadow: none;
-    border-radius: 0;
-    border-image: linear-gradient(to top,
-                              mix($borders_color, $base_color, 50%),
-                              $base_color
-                              ) 0 1 1 0;
+    &:hover {
+      @extend %column_header_button;
+      color: mix($_column_header_color,$fg_color,50%);
+      box-shadow: none;
+    }
+    &:active {
+      @extend %column_header_button;
+      color: $fg_color;
+    }
+  }
+  &:last-child .button { border-right-style: none;  }
+}
+
+%column_header_button {
+  border-width: 0 1px 1px 0;
+  border-radius: 0;
+  background-image: none;
+  border-color: $bg_color;
+  text-shadow: none;
+  &:insensitive {
+    border-color: $bg_color;
     background-image: none;
-    background-color: $base_color;
-    color: mix($fg_color,$base_color,50%);
-    text-shadow: none;
-    font-weight: bold;
+  }
+  &:backdrop {
+    border-color: $backdrop_bg_color;
+    background-image: none;
+    &:insensitive {
+      border-color: $backdrop_bg_color;
+      background-image: none;
+    }
   }
 }
 
index ba4a9ac16b1a0b36e70e62131d5ad38b6375af3e..bd2e573966e6d87747a5424d9b36d41b663b886e 100644 (file)
@@ -843,20 +843,34 @@ GtkComboBox {
 /**************
  * Tree Views *
  **************/
-column-header .button,
-column-header .button:hover,
-column-header .button:active,
-column-header .button:backdrop {
+column-header .button {
+  color: #8b8b8a;
+  font-weight: bold;
+  text-shadow: none;
+  box-shadow: none; }
+  column-header .button:hover {
+    color: #bcbcbb;
+    box-shadow: none; }
+  column-header .button:active {
+    color: #eeeeec; }
+column-header:last-child .button {
+  border-right-style: none; }
+
+column-header .button, column-header .button:hover, column-header .button:active {
   border-width: 0 1px 1px 0;
-  border-color: transparent;
-  box-shadow: none;
   border-radius: 0;
-  border-image: linear-gradient(to top, #222424, #292929) 0 1 1 0;
   background-image: none;
-  background-color: #292929;
-  color: #8b8b8a;
-  text-shadow: none;
-  font-weight: bold; }
+  border-color: #393f3f;
+  text-shadow: none; }
+  column-header .button:insensitive {
+    border-color: #393f3f;
+    background-image: none; }
+  column-header .button:backdrop {
+    border-color: #393f3f;
+    background-image: none; }
+    column-header .button:backdrop:insensitive {
+      border-color: #393f3f;
+      background-image: none; }
 
 /*********
  * Menus *
index 13a1947a8e33510534fe2090ac24fe0b3ac80177..3e5c8ba05b5128dd693d36a7754abe082d2b7320 100644 (file)
@@ -843,20 +843,34 @@ GtkComboBox {
 /**************
  * Tree Views *
  **************/
-column-header .button,
-column-header .button:hover,
-column-header .button:active,
-column-header .button:backdrop {
+column-header .button {
+  color: #96999a;
+  font-weight: bold;
+  text-shadow: none;
+  box-shadow: none; }
+  column-header .button:hover {
+    color: #626668;
+    box-shadow: none; }
+  column-header .button:active {
+    color: #2e3436; }
+column-header:last-child .button {
+  border-right-style: none; }
+
+column-header .button, column-header .button:hover, column-header .button:active {
   border-width: 0 1px 1px 0;
-  border-color: transparent;
-  box-shadow: none;
   border-radius: 0;
-  border-image: linear-gradient(to top, #d0d0d0, white) 0 1 1 0;
   background-image: none;
-  background-color: white;
-  color: #96999a;
-  text-shadow: none;
-  font-weight: bold; }
+  border-color: #ededed;
+  text-shadow: none; }
+  column-header .button:insensitive {
+    border-color: #ededed;
+    background-image: none; }
+  column-header .button:backdrop {
+    border-color: #ededed;
+    background-image: none; }
+    column-header .button:backdrop:insensitive {
+      border-color: #ededed;
+      background-image: none; }
 
 /*********
  * Menus *